Un efecto de cabezón sería una forma de animación en "U" en mi mente con tallos ligeramente más cortos.
He intentado usar varios arcos/semicírculos para crear un efecto de cabezón, pero nada funciona correctamente.
Debo usar transform con translate debido a que es un SVG. También estoy usando animejs pero tampoco puedo ver un método para lograr esto en esa biblioteca. ¿Los pasos de animación jQuery parecen los más simples?
Este es el efecto que estoy buscando lograr:
[![ingrese la descripción de la imagen aquí][1]][1]
Usando este código:
function loopBobble() { var end = 180; $({ counter: 0 }).animate({ counter: end },{ duration: 1000, easing: "swing", step: function(t, fx) { var a = t / 60; // from degrees to radians var x = Math.cos(a) * 10; var y = Math.sin(a) * 10; $('#bobble').attr('style', 'transform: translateX(' + x + 'px) translateY(' + y + 'px);'); if (t == end) { loopBobble(); } } }); } loopBobble();Lo mejor que puedo lograr con la cara espeluznante es este resultado:
[![ingrese la descripción de la imagen aquí][2]][2]
¿Es correcto mi enfoque? Hubiera asumido que una animación en forma de "U" estaría integrada en animejs o jquery. No puedo encontrar mucho en línea. no soy matematico
¿Qué hay de css solamente?
.head { background-color: #FA0; border-radius: 50%; width: 100px; height: 100px; left: 0px; top: 0px; position: absolute; animation-name: xOffset; animation-duration: 1s; animation: xOffset 1s ease-in-out infinite, yOffset .5s ease-in-out infinite; } @keyframes xOffset { 50% { left: 50px; } 100% { left: 0px; } } @keyframes yOffset { 50% { top: 25px; } 100% { top: 0px; } } <div class="head"></div> transform: translate -Versión
Deberá agregar un contenedor en su csv para aplicar tiempos de aceleración separados en x e y. De lo contrario, no son posibles diferentes tiempos de aceleración usando transform ya que transform se anima como un todo.
.head { background-color: #FA0; border-radius: 50%; width: 100px; height: 100px; animation-name: xOffset; animation-duration: 1s; animation: xOffset 1s ease-in-out infinite; } .wrapper { animation: yOffset .5s ease-in-out infinite; } @keyframes xOffset { 50% { transform: translateX(50px); } 100% { transform: translateX(0px); } } @keyframes yOffset { 50% { transform: translateY(25px); } 100% { transform: translateY(0px); } } <div class="wrapper"> <div class="head"></div> </div>